<!--
 * @Author: delin66
 * @Date: 2025-01-02 15:54:06
 * @LastEditors: delin66
 * @LastEditTime: 2025-04-24 11:01:23
 * @Descripttion: 
-->
<template>
  <div class="container">
      <el-menu class="nav"
        :default-active="activeIndex"
        mode="vertical"
        background-color="#194E87"
        text-color="#e6f7ff"
        active-text-color="#ffffff"
        router
      >
        <template v-for="(item, index) in navList">
          <el-menu-item
            :index="item.path"
            style="font-size: 16px; font-weight: bold"
            :class="item.path == activeIndex ? 'active' : '' ">
            {{ item.title }}
          </el-menu-item>
        </template>
      </el-menu>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { useRoute ,useRouter} from 'vue-router';

const route = useRoute();
const router = useRouter();
const activeIndex = ref<string>('/enterprise-service/foster/policy');


const navList = ref([
    // {title:'企业活动',path:'/enterprise-service/foster/enterprise-activity'},
  { title: '高企政策动态', path: '/enterprise-service/foster/policy' },
  // { title: '高企申报辅导', path: '/enterprise-service/foster/guide' },
  {title:'科技型中小企业政策动态',path:'/enterprise-service/foster/policy-small'},
  // {title:'科技型中小企业申报辅导',path:'/enterprise-service/foster/guide-small'},
  // { title: '高企入库申请', path: '/enterprise-service/foster/storage-application' },
  // { title: '中小企业入库申请', path: '/enterprise-service/foster/storage-application-small' }
  { title: '项目申报', path: '/enterprise-service/foster/project-application' },
]);

const handleSelect = (key: string, keyPath: string[]) => {
  router.push(key);
};

// 控制nav是否显示

const curPath = computed(() => {
  return route.path;
});
watch(
  curPath,
  () => {
    // 正确显示当前显示的nav
    activeIndex.value = route.path;
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 65vh;
  display: flex;
}

.active{
  background-color: #003B7A !important;
}

//.nav {
//  width: 32%;
//  background-color: #545c64;
//  .el-menu-item.is-active {
//    border-left: 4px solid #ffd04b;
//  }
//}
</style>
